<template>
  <div class="sc-design">
    <q-form @submit="onSubmit" @reset="onReset" ref="loginForm">
      <q-tabs
        v-model="tab"
        active-color="primary"
        indicator-color="primary"
        align="left"
        :breakpoint="0"
        narrow-indicator
        class="text-black"
      >
        <q-tab name="mails" no-caps label="用户密码登录" />
        <q-tab name="alarms" no-caps label="手机号登录" />
      </q-tabs>

      <div class="q-gutter-y-sm">
        <q-tab-panels v-model="tab" class="text-center">
          <q-tab-panel name="mails" class="q-col-gutter-y-sm">
            <div class="row">
              <div class="col">
                <q-input
                  :maxlength="11"
                  outlined
                  clearable
                  clear-icon="cancel"
                  v-model="name"
                  dense
                  debounce="500"
                  :label="userNameLabel"
                  lazy-rules
                  square
                  :rules="[(val) => (val && val.length > 0) || '请输入用户名']"
                >
                  <template v-slot:prepend>
                    <q-icon name="event" />
                  </template>
                </q-input>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <q-input
                  outlined
                  clearable
                  clear-icon="cancel"
                  :type="isPwd ? 'password' : 'text'"
                  v-model="password"
                  dense
                  debounce="500"
                  :label="passwordLabel"
                  lazy-rules
                  square
                  :rules="[(val) => (val && val.length > 0) || '请输入密码']"
                >
                  <template v-slot:prepend>
                    <q-icon name="event" />
                  </template>
                  <template v-slot:append>
                    <q-icon
                      :name="isPwd ? 'visibility_off' : 'visibility'"
                      class="cursor-pointer"
                      @click="isPwd = !isPwd"
                    />
                  </template>
                </q-input>
              </div>
            </div>
          </q-tab-panel>
          <q-tab-panel name="alarms" class="q-col-gutter-y-sm">
            <div class="row">
              <div class="col">
                <q-input
                  outlined
                  clearable
                  clear-icon="cancel"
                  v-model="name"
                  dense
                  debounce="500"
                  label="手机号"
                  lazy-rules
                  square
                  :rules="[(val) => (val && val.length > 0) || '请输入用户名']"
                >
                  <template v-slot:prepend>
                    <q-icon name="event" />
                  </template>
                </q-input>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <q-input
                  outlined
                  :type="isPwd ? 'password' : 'text'"
                  v-model="password"
                  dense
                  debounce="500"
                  label="验证码"
                  lazy-rules
                  square
                  :rules="[(val) => (val && val.length > 0) || '请输入密码']"
                >
                  <template v-slot:prepend>
                    <q-icon name="event" />
                  </template>
                  <template v-slot:after>
                    <q-btn
                      unelevated
                      color="secondary"
                      class="no-border-radius"
                      label="获取验证码"
                    />
                  </template>
                </q-input>
              </div>
            </div>
          </q-tab-panel>
        </q-tab-panels>

        <div class="q-mx-md">
          <div class="row">
            <div class="col text-left">
              <q-checkbox v-model="autoLogin" label="自动登录" />
            </div>
            <div class="col text-right">
              <q-btn no-caps color="primary" flat label="忘记密码" />
            </div>
          </div>
          <div class="row">
            <div class="col">
              <q-btn
                no-caps
                dense
                unelevated
                label="登录"
                size="17px"
                color="primary q-mt-sm"
                class="full-width no-border-radius"
                type="submit"
                :loading="loginLogin"
              >
                <template v-slot:loading>
                  <q-spinner-ios class="on-left" />
                  登录 ...
                </template>
              </q-btn>
            </div>
          </div>
          <div class="row q-pt-md">
            <div class="col-auto text-left q-pt-sm"></div>
            <!-- <div class="col text-right">
              <q-btn
                to="/user/register"
                color="primary"
                flat
                no-caps
                label="注册用户"
              />
            </div> -->
          </div>
        </div>
      </div>
    </q-form>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { useQuasar } from 'quasar';
import { Login } from '../../api/user';
import { GlobalStore } from '../../stores';

const router = useRouter();
const tab = ref('mails');
const name = ref(null);
const password = ref(null);
const userNameLabel = '用户名';
const passwordLabel = '密码';
const isPwd = ref(true);
const autoLogin = ref(true);
const loginLogin = ref(false);
const $q = useQuasar();

const globalStore = GlobalStore();
// globalStore.setToken('11111111');
// setTimeout(() => {
//   console.log(globalStore.token);
// }, 1500);

// console.log('66666666666666', Login);

const onSubmit = async () => {
  loginLogin.value = true;
  let userInfo = {
    username: name.value,
    password: password.value,
  };
  let isLogin: any = await globalStore.Login(userInfo);
  loginLogin.value = false;
  if (isLogin.code === 200) {
    loginSuccess();
  } else {
    requestFailed(isLogin.msg);
  }
  console.log('测试=========', isLogin);
};
const loginSuccess = () => {
  $q.notify({
    color: 'white',
    textColor: 'positive',
    icon: 'check_circle',
    position: 'top',
    message: '登录成功',
  });
  console.log(globalStore.token);
  router.push('/');
};
const requestFailed = (message: any) => {
  $q.notify({
    color: 'white',
    textColor: 'negative',
    icon: 'cancel',
    position: 'top',
    message,
  });
  console.log('登录失败');
};
const onReset = () => {
  console.log('重置');
};
</script>

<style scoped>
.q-tab-panel {
}

.flip-list-move {
  transition: transform 1s;
}
</style>
